<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="登录时间">
        <BiDatePicker
          v-model="formInline.login_time"
          clearable
          size="small"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:SS"
          value-format="yyyy-MM-dd HH:mm:SS"
          range-separator="至"
          style="width:280px;"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="margin-left:10px;"
          @click="startSearch"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-table">
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >

      </BiTable>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { memberLogin } from '@/api/userPage'
export default {
  props: ['rowInfo'],
  data() {
    return {
      formInline: {
        login_time: [],
        member_id: ''
      },
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '小程序',
          prop: 'mini_app_name'
        },
        {
          label: '登录IP',
          prop: 'ip'
        },
        {
          label: '登录时间',
          prop: 'last_login_time'
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.formInline.login_time = [moment().subtract(1, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
    this.clickSearch('type')
  },
  methods: {
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    clickSearch(type) {
      this.loading = true
      console.log(this.formInline.login_time)
      const data = {
        member_id: this.rowInfo.member_id,
        start_date: this.formInline?.login_time?.[0] || '',
        end_date: this.formInline?.login_time?.[1] || '',
        ...this.page_info
      }
      memberLogin({ ...data }).then((res) => {
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
          !type ? this.$message.success(res.msg) : ''
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>